let dv1 = document.querySelector('.naav>div:nth-of-type(1)')
let dv2 = document.querySelector('.naav>div:nth-of-type(2)')
let nav = document.querySelector('.nav')
let navv = document.querySelector('.navv')
let uu = document.querySelector('.uu')
let foot = document.querySelector('.footer')
let span = document.querySelector('span')
dv1.onclick = function () {
    fetch('http://chst.vip:1234/api/getgsshop')
        .then(body => body.json())
        .then(res => {
            let arr = res.result
            // console.log(arr)
            let domStr = ''
            arr.forEach(item => {
                // console.log(item)
                domStr += `<div class="form"><p shopid=${item.shopId}>${item.shopName}</p></div>`
                nav.innerHTML = domStr
            })
        })
    $('.form').css('display', 'block')
    $('.form').css('display', 'none')
}
nav.onclick = function (e) {
    if (e.target.localName == 'p') {
        // console.log(e.target)
        let _this = e.target
        let id = _this.getAttribute('shopid')
        // console.log(id)
        fetch('http://chst.vip:1234/api/getgsproduct?areaid=0&shopid=' + id)
            .then(body => body.json())
            .then(res => {
                let arr = res.result
                // console.log(arr)
                let domStr = ''
                arr.forEach(item => {
                    domStr += `<li><img src=${item.productImg} alt="">
        <p >${item.productName}</p>
        <b>${item.productPrice}</b>
        </li>`
                    uu.innerHTML = domStr
                })

            })
    }
}

dv2.onclick = function () {
    fetch('http://chst.vip:1234/api/getgsshoparea')
        .then(body => body.json())
        .then(res => {
            let arr = res.result
            // console.log(arr)
            let domStr = ''
            arr.forEach(item => {
                // console.log(item)
                domStr += `<div class="form"><p areaid=${item.areaId}>${item.areaName}</p></div>`
                navv.innerHTML = domStr
            })
        })
    $('.form').css('display', 'block')
    $('.form').css('display', 'none')
}
navv.onclick = function (e) {
    if (e.target.localName == 'p') {
        // console.log(e.target)
        let _this = e.target
        let id = _this.getAttribute('areaid')
        // console.log(id)
        fetch('http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=' + id)
            .then(body => body.json())
            .then(res => {
                let arr = res.result
                // console.log(arr)
                let domStr = ''
                arr.forEach(item => {
                    domStr += `<li><img src=${item.productImg} alt="">
        <p>${item.productName}</p><b>${item.productPrice}</b>
        </li>`
                    uu.innerHTML = domStr
                })

            })
    }
}
fetch('http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0')
    .then(body => body.json())
    .then(res => {
        let arr = res.result
        // console.log(arr)
        let domStr = ''
        arr.forEach(item => {
            domStr += `<li><img src=${item.productImg} alt="">
        <p>${item.productName}</p><b>${item.productPrice}</b>
        </li>`
            uu.innerHTML = domStr
        })

    })
$('.nav').on('click', '.form', function () {
    // console.log('ss')
    $(this).css('display', 'block').siblings().css('display', 'none')
    $(this).css('text-align', 'center')
    $(this).css('color', '#fff')
    $(this).css('background-color', 'red')
})
$('.navv').on('click', '.form', function () {
    // console.log('ss')
    $(this).css('display', 'block').siblings().css('display', 'none')
    $(this).css('text-align', 'center')
    $(this).css('color', '#fff')
    $(this).css('background-color', 'red')
})

span.onclick = function () {
    location.href = "./../index.html"
}
foot.onclick = function () {
    let scrollTop = document.documentElement.scrollTop
    console.log(scrollTop)
    document.documentElement.scrollTop = 0;
}